<template>
  <page-header-wrapper>
    <a-card :bordered="false" style="margin-bottom: 10px">
      <a-row type="flex" justify="space-between">
        <a-col>
          <span class="info">{{this.$route.query.entName}}</span>
        </a-col>
        <a-col>
          <a-button @click="back">返回</a-button>
        </a-col>
      </a-row>
    </a-card>
    <a-card :bordered="false" title="资质信息">
      <div class="pl-40">
        <ul>
          <!-- <li class="list-info">
            <span class="bottom">{{ item.label }}</span>
            {{ item.name }}
          </li> -->
          <li class="list-info">
            <span>证书名称</span>
            {{entCertInfo.certName}}
          </li>
          <li class="list-info">
            <span>证书编号</span>
            {{entCertInfo.certNo}}
          </li>
          <li class="list-info">
            <span>发证机构名称</span>
            {{entCertInfo.certOrgName}}
          </li>
          <li class="list-info">
            <span>发证日期</span>
            {{entCertInfo.certDate}}
          </li>
          <li class="list-info">
            <span>证书有效期</span>
            {{entCertInfo.certIndate}}
          </li>
          <li class="list-info">
            <span>证书概述</span>
            {{entCertInfo.certSummary}}
          </li>
        </ul>
        <div class="mt-40 aptitude">
          <span>资质图片：</span>
          <div class="picture mt-10" v-for="(item, index) in entCertInfo.entCertFiles " :key="index">
            <div>
              <img :src=item.fileUrl alt />
            </div>
            <!-- <div class="ml-20">
              <img src="@/assets/images/2.jpg" alt />
            </div> -->
          </div>
        </div>
        <div v-if="entCertInfo.auditStatus==3">
          <h3 class="part-title">审核不通过的原因:</h3>
          <p>{{entCertInfo.auditRemark}}</p>
        </div>
        <div v-if="isExamine" style="margin-left: 40%; margin-top: 30px">
          <a-button type="primary" @click="success">通过</a-button>
          <a-button type="danger" @click="showModal" class="ml-20">不通过</a-button>
        </div>
      </div>
      <a-modal v-model="visible" title="审核退回" @ok="handleOk" :width="800">
        <!-- <a-form :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-form-item label="审核不通过原因:">
            <a-textarea v-model="form.message" style="margin-left: 50px" :auto-size="{ minRows: 7, maxRows: 50 }" />
          </a-form-item>
        </a-form> -->

        <a-form-model :model="form" ref="form" :rules="rules">
          <a-form-model-item label="审核不通过原因:" prop="message">
            <a-textarea v-model="form.message" :auto-size="{ minRows: 7, maxRows: 50 }" />
          </a-form-model-item>
        </a-form-model>
      </a-modal>
    </a-card>
  </page-header-wrapper>
</template>
<script>
import { getEntCertInfoById,checkEntCert } from "@/api/entVerify";
export default {
  data() {
    return {
      id: "",//资质主键Id
      visible: false,
      labelCol: { span: 4 },
      wrapperCol: { span: 15 },
      form: {
        message: '',
        isPass: true,
        type: 1
      },
        rules: {
        message: [
          {
            required: true,
            message: '请输入审核不通过原因',
            trigger: 'blur',
          },
        ],
      },
      entCertInfo:{
        id: "",
        entId: "",
        userId: "",
        certName: "",
        certNo: "",
        certOrgName: "",
        certDate: "",
        certIndate: "",
        certSummary: "",
        entCertFiles: []
      },
      isExamine:false
    }
  },
  created(){
    if (this.$route.query.id) {
      this.id = this.$route.query.id;
      this.getEntCertInfo();
    }
  },
  methods: {
    back() {
      this.$router.back()
    },
    showModal() {
      this.visible = true
    },
    handleOk() {

       let that = this
      this.$refs.form.validate((valid) => {
        if (valid) {
           that.form.isPass = false
      that.checkEntCert('审核处理完成！')
        } else {
          console.log('error submit!!')
          return false
        }
      })
     
      // this.$message.success('审核处理完成！')
    },
    success() {
      var that = this;
      this.$confirm({
        title: "您审核确定要通过此信息吗?",
        okText: "确定",
        okType: "danger",
        cancelText: "取消",
        onOk() {
          // 点击确定
          that.form.isPass = true
          that.form.message = ""
          // this.$message.success('审核通过！')
          that.checkEntCert('审核通过！')
        },
        onCancel() {
          // 点击取消
          console.log("Cancel");
        }
      });
      
    },

    //根据Id获取基本信息
    getEntCertInfo(){
      const _this = this;
      const id = _this.id;
      getEntCertInfoById(id).then(res=>{
        console.log("资质详细信息");
        console.log(res);
        if(res.code === 200){
          _this.entCertInfo = res.data
        }
        if(res.data.auditStatus==1){
          this.isExamine = true
        }
      }).catch(err=>{console.log(err);})
    },

    //审核
    checkEntCert(msg){
      const _this = this
      let _param = {
        id: _this.entCertInfo.id,
        certNo: _this.entCertInfo.certNo,
        owner: _this.entCertInfo.userId,
        ..._this.form,
        entId: this.entCertInfo.entId
      }
      checkEntCert(_param).then(res=>{
        console.log("审核");
        console.log(res);
        if(res.code === 200){
          this.$message.success(msg)
          this.visible = false
          this.$router.push("/infoVerify/ProvideTel/list")
        }else{
           this.$message.err("发生异常")
        }
      })
    }
  },
  mounted() {
    // console.log(this.$router.params)
  },
}
</script>
<style lang="less" scoped>
.info {
  font-family: 'Arial Negreta', 'Arial';
  font-weight: 700;
  font-style: normal;
  font-size: 24px;
  color: #333333;
}
.btn {
  border-radius: 47%;
  transform: scale(1, 1.2);
}
.picture {
  margin-bottom: 20px;
  display: flex;
  overflow: hidden;
  background-size: cover;
}
.picture img {
  // margin-top: 50px;
  width: 276px;
  height: 184px;
  cursor: pointer;
  transition: all 0.6s;
}
.picture img:hover {
  transform: scale(1.4);
}
.list-info {
  border-bottom: 1px dashed #ebeef5;
  line-height: 24px;
  padding: 10px 0;
  color: #030303;
  span {
    color: #909399;
  }
}
.aptitude {
  position: relative;
}
</style>